<script>
export default {
  name: "ImgItem",
  props: {
    item: Object,
  },
  methods: {},
  render() {
    const { item } = this;
    return (
      <div class="wrap d-flex fd-column pointer" style="margin: 0 15px 15px 0">
        <el-popover placement="top" trigger="hover" open-delay={300}>
          <div slot="reference">
            <el-image class="img-round" shape="square" fit="cover" style="width: 80px; height: 80px" src={item.url}></el-image>
          </div>
          <el-image shape="square" fit="contain" style="width: 400px; height: 300px" src={item.url}></el-image>
        </el-popover>
        {this.$slots.default}
      </div>
    );
  },
};
</script>

<style scoped>
.wrap >>> .el-button--mini.is-round{
  padding: 3px 15px;
}
.img-round{
  border-radius: 10px;
  overflow: hidden;
}
</style>
